﻿@model SectionWidget
@{
    Script.Reqiured("jQueryUi").AtHead();
    Script.Reqiured("lightBox").AtFoot();
    Script.Reqiured("validate").AtFoot();

    Style.Reqiured("lightBox").AtHead();
    Style.Reqiured("SectionAdmin").AtHead();
    var templates = new List<List<string>>
    {
        new List<string>{""},
        new List<string>{"col-sm-6","col-sm-6"},
        new List<string>{"col-sm-7","col-sm-5"},
        new List<string>{"col-sm-8","col-sm-4"},
        new List<string>{"col-sm-9","col-sm-3"},
        new List<string>{"col-sm-5","col-sm-7"},
        new List<string>{"col-sm-4","col-sm-8"},
        new List<string>{"col-sm-3","col-sm-9"},
        new List<string>{"col-sm-4","col-sm-4","col-sm-4"},
        new List<string>{"col-sm-3","col-sm-6","col-sm-3"},
        new List<string>{"col-sm-5","col-sm-2","col-sm-5"},
        new List<string>{"col-xs-6 col-sm-3", "col-xs-6 col-sm-3", "col-xs-6 col-sm-3", "col-xs-6 col-sm-3"},
        new List<string>{"col-sm-2 col-sm-offset-1","col-sm-2","col-sm-2","col-sm-2", "col-sm-2" },
        new List<string>{"col-xs-4 col-sm-2", "col-xs-4 col-sm-2", "col-xs-4 col-sm-2", "col-xs-4 col-sm-2", "col-xs-4 col-sm-2", "col-xs-4 col-sm-2" }
    };

}

@using (Html.BeginForm())
{
    <ul class="nav nav-tabs">
        <li role="presentation"><a href="#info">基本信息</a></li>
        @if (Model.Groups != null)
        {
            <li role="presentation" class="active"><a href="#group">模板分组</a></li>
        }
    </ul>
    <div class="panel panel-default  tab-content">
        <div id="info" class="panel-body tab-pane">
            <input type="hidden" name="ReturnUrl" value="@ViewBag.ReturnUrl" />
            @Html.EditorForModel()
        </div>
        @if (Model.Groups != null)
        {
            <div id="group" class="panel-body tab-pane">

                <div id="section-groups">
                    @foreach (SectionGroup group in Model.Groups.OrderBy(m => m.Order))
                    {
                        Html.RenderPartial("SectionGroup.Edit", group);
                    }
                </div>
                <div class="group-template">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-xs-1">
                                <div class="text-center">
                                    <a href="@Url.Action("Create", "SectionGroup", new {sectionWidgetId = Model.ID})" class="btn btn-link btn-xs dialog" data-width="1000" data-height="600">
                                        <i class="glyphicon glyphicon-plus"></i>
                                        添加
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-1">
                                <div class="text-center">
                                    组分列
                                </div>
                            </div>
                            <div class="col-xs-11">
                                <div class="row">
                                    @foreach (var template in templates)
                                    {
                                        <div class="col-xs-2 item @(template.Count == 1 || !Model.Groups.Any() || template.Count == Model.Groups.Count() ? "" : "hide")">
                                            <div class="row border">
                                                @foreach (var col in template)
                                                {
                                                    <div class="col @col" data-col="@col">
                                                        <div class="content-helper"></div>
                                                    </div>
                                                }
                                            </div>
                                        </div>
                                    }
                                </div>
                            </div>                            
                        </div>
                    </div>

                </div>

            </div>
        }
        <div class="panel-footer">
            @if (Model.ID.IsNullOrEmpty())
            {
                <input id="design" type="submit" class="btn btn-primary" value="继续" data-value="@ActionType.Continue" />
            }
            else
            {
                <input id="design" type="submit" class="btn btn-primary" value="保存" data-value="@ActionType.Update"/>
                if (Model.IsTemplate && Model.Thumbnail.IsNotNullAndWhiteSpace())
                {
                    <a href="@Url.Action("Pack", new {Model.ID})" class="btn btn-success">
                        <i class="glyphicon glyphicon-save-file"></i>
                        打包模板
                    </a>
                }
            }
            <input id="copy-widget" type="button" class="btn btn-warning" data-id="@Model.ID" value="复制" />
            <input type="button" class="btn btn-default cancel" value="取消" />
        </div>

    </div>

}
@using (Script.AtFoot())
{
    <script type="text/javascript">
        $(document).on("click", "a.dialog", function () {
            var width = $(this).data("width");
            var height = $(this).data("height");

            Easy.ShowUrlWindow({
                url: $(this).attr("href"), title: $(this).attr("title") || $(this).text(), callBack: function () {
                    reload();
                }, isDialog: true, width: width || 800, height: height || 460
            });
            return false;
        }).on("click", "a.ajax.delete", function () {
            var link = $(this).attr("href");
            Easy.ShowMessageBox("提示", "确定要删除吗？", function () {
                $.get(link, {}, function (data) {
                    reload();
                }, "json");
            }, true, 3);
            return false;
        }).on("click", "#copy-widget", function () {
            $.post("@Url.Action("Copy","Widget",new{module="admin"})", { widgetId: $(this).data("id") }, function (data) {
                Easy.MessageTip.Show(data.Message);
            });
        });
        function reload() {
            $.get("@Url.Action("Editor","SectionWidget")", { sectionWidgetId: '@Model.ID' }, function (html) {
                $("#section-groups").html(html);
                sortGroup();
            }, "html");
        }
        function sortGroup() {
            $("#section-groups").sortable({
                handle: ".sort-handle",
                stop: function (event, ui) {
                    var result = {}
                    $(event.target).find(".section-group").each(function (i) {
                        result["[" + i + "].ID"] = $(this).data("id");
                        result["[" + i + "].Order"] = i + 1;
                    });
                    $.post("@Url.Action("Sort","SectionGroup")", result, function (data) { reload(); }, "json");
                }
            });
            $(".section-group .list-group").sortable({
                handle: ".sort-handle",
                stop: function (event, ui) {
                    var result = {}
                    $(event.target).find(".list-group-item").each(function (i) {
                        result["[" + i + "].ID"] = $(this).data("id");
                        result["[" + i + "].Order"] = i + 1;
                    });
                    $.post("@Url.Action("SortContent","SectionGroup")", result, function (data) { reload(); }, "json");
                }
            });
            var groups = $(".section-group");
            var templateItem = $(".group-template .item");
            $(".actived", templateItem).removeClass("actived");
            templateItem.each(function () {
                var allMatch = true;
                var cols = $(".col", this);
                cols.each(function (i) {
                    if ($(".section-group:eq(" + i + ")").data("col") !== $(this).data("col")) {
                        allMatch = false;
                    }
                });
                if (allMatch && groups.size() === cols.size()) {
                    $(".row", this).addClass("actived");
                }
                if (groups.size() === 0 || cols.size() === 1 || groups.size() === cols.size()) {
                    $(this).removeClass("hide");
                } else {
                    $(this).addClass("hide");
                }
            });
            if ($(".actived", templateItem).size() === 0) {
                var full = true;
                groups.each(function () {
                    if ($(this).data("col")) {
                        full = false;
                    }
                });
                if (full && groups.size() > 0) {
                    templateItem.first().children().addClass("actived");
                }
            }
        }
        $(function () {
            sortGroup();
        });
        $(document).on("click", ".group-template .row.border", function () {
            $(".group-template .row.border").removeClass("actived");
            $(this).addClass("actived");
            var groups = [];
            $(".col", this).each(function (i) {
                groups[i] = {};
                groups[i].PercentWidth = $(this).data("col");
                groups[i].SectionWidgetId = '@Model.ID';
                groups[i].GroupName = "组" + (i + 1);
                groups[i].PartialView = "SectionTemplate.Default";
                groups[i].Order = (i + 1);
                groups[i].ID = $(".section-group:eq(" + i + ")").data("id") || 0;
            });
            var sGroup = $(".section-group");
            if (groups.length !== sGroup.size() && sGroup.size() > 0) {
                groups = [];
                sGroup.each(function (i) {
                    groups[i] = {};
                    groups[i].ID = $(this).data("id");
                    groups[i].PercentWidth = "";
                });
            }
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: "@Url.Action("SplitColumn","SectionGroup",new{module="admin"})",
                data: JSON.stringify(groups),
                contentType: 'application/json; charset=utf-8',
                async: false,
                success: function (data) {
                    if (data.Groups) {

                        reload();
                    }
                }
            });
        });
    </script>
}